<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- Mirrored from 112.216.117.106:16682/html/template.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 03 Apr 2015 06:58:08 GMT -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>농협생명</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/selectric.js"></script>
<script type="text/javascript" src="js/icheck.js"></script>
<script type="text/javascript" src="js/ui.js"></script>

<style type="text/css">
body{background-color:#ebe7df;}
#temp_warp{width:990px; margin:0 auto;}
h1{font-family:'Lato'; font-size:120px; color:#fff; text-align:center; padding:115px 0 73px;}
h1 span{font-size:40px; text-decoration:underline;}

.temp_all{background-color:#f5f3ef; padding-bottom:40px; margin-bottom:80px;}
h2{position:relative; height:60px; background-color:#2489c5; color:#fff; text-align:center; line-height:60px;}
h2 span{position:absolute; display:inline-block; zoom:1; *display:inline; left:0; top:0; width:60px; height:60px; background-color:#e2b78d; font-weight:bold; font-size:24px; line-height:60px;}

.temp_all ul{background-color:#fff; padding:40px 0;}
.temp_all ul li{font-size:16px; font-weight:700; color:#555; padding:6px 0; margin-left:60px;}
.temp_all ul li a{display:inline-block; color:#55555f; font-weight:lighter; border-bottom:1px dotted #bbb;}
.temp_all ul li span{font-size:12px; font-weight:lighter; color:#1f7f5c;}

h3{height:60px; font-family:'Helvetica'; font-size:32px; color:#222; font-weight:bold; text-align:center;}
.temp_cont{position:relative; width:100%; margin-bottom:40px;}
.temp_cont h4{position:absolute; top:0; left:0; width:240px; height:51px; border:3px solid #ddd8ce; border-bottom:0; background-color:#fff; font-size:20px; color:#222; text-align:center; line-height:50px;}
.temp_cont_box{clear:both; border:3px solid #ddd8ce; background-color:#fff; padding:20px 50px 34px;}
.temp_cont_box.font{font-size:20px; color:#444; line-height:24px; text-align:justify;}
.temp_cont_box.font.lato{font-family:'Lato';}
.temp_cont h5{font-family:'Helvetica', 'ng', 'NanumGothic'; font-size:16px; color:#444; font-weight:700; padding-top:14px; margin-bottom:10px;}
.temp_cont label{font-size:14px; color:#444; padding-left:10px;}
.temp_cont_box p{margin-bottom:15px;}

.temp_top{display:block; float:right; width:50px; height:35px; background-color:#e2b78d; text-align:center; color:#fff; font-size:24px; font-weight:bold; padding-top:15px;}
.temp_top{color:#fff;}

.temp_2column:after{content:""; display:block; clear:both;}
.temp_2column li{float:left; width:25%;}

.temp_column{overflow:hidden;}
.temp_column li{float:left; width:50%;}

.ck{display:inline-block; zoom:1; *display:inline; *position:relative; *padding:0; *margin-right:23px; *height:22px; *line-height:11px; vertical-align:middle;}/* IE7 대응 */

.temp_datepicker{background-color:#fff; margin-bottom:40px;}
.temp_datepicker h4{position:relative; height:60px; background-color:#1f7f5c; font-size:20px; color:#fff; text-align:center; line-height:60px;}
.temp_datepicker h4 span{position:absolute; display:inline-block; zoom:1; *display:inline; left:0; top:0; width:60px; height:60px; background-color:#83b3be; font-weight:bold; font-size:24px; line-height:60px;}
.temp_datepicker h4 span a{color:#fff;}


.temp_datepicker .temp_cont{margin-bottom:0;}
.temp_datepicker .temp_cont .temp_cont_box{border:0;}
	
.btn_pop{border:0; background:#3da0db; color:#fff; font-weight:bold; padding:10px; cursor:pointer;}

.pop_normal{background:#fff; padding:30px;}

</style>
</head>

<body>
<!-- Wrap -->
<div id="temp_warp">
	<h1>Template<span>ⓒOneGuard</span></h1>

	<!-- All -->
	<div class="temp_all">
		<h2 id="temp_article"><span>&#62;</span>TEMPLATE ARTICLE</h2>
		<ul>
			<li>&#9776; Web Font <a href="#fontNanum">NanumGothic - Page</a> <span>: 폰트 기본 &#39;나눔고딕&#39;</span></li>
			<li>&#9776; Web Font <a href="#fontLato">Lato - Number</a> <span>: 폰트 숫자 &#39;Lato&#39;</span></li>
			<li>&#9776; Custom <a href="#tselectbox">Select box</a></li>
			<li>&#9776; Custom Input Type <a href="#tcheckbox">Checkbox</a></li>
			<li>&#9776; Custom Input Type <a href="#tradio">Radio</a></li>
			<li>&#9776; jQuery UI <a href="#tdatepicker">Datepicker</a></li>
			<li>&#9776; jQuery UI <a href="#tmodal">Modal window</a></li>
			<li>&#9776; Page Template <a href="#tbtn">Button</a></li>
			<li>&#9776; Page Template <a href="#ticon">Icon</a></li>
		</ul>
	</div>
	<!-- //All -->

	<!-- Font -->
	<h3>Font</h3>
	<div class="temp_cont">
		<h4 id="fontNanum">NanumGothic</h4>		
		<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
		<div class="temp_cont_box font">
			<h5>Consonant</h5>
			ㄱ ㄴ ㄷ ㄹ ㅁ ㅂ ㅅ ㅇ ㅈ ㅊ ㅋ ㅌ ㅍ ㅎ ㅃ ㅉ ㄸ ㄲ ㅆ
			<h5>Vowel</h5>
			ㅏ ㅑ ㅓ ㅕ ㅗ ㅛ ㅜ ㅠ ㅡ ㅣ
			<h5>Number</h5>
			1 2 3 4 5 6 7 8 9 0
			<h5>English</h5>
			A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br/>
			a b c d e f g h i j k l m n o p q r s t u v w x y z
		</div>
	</div>
	<div class="temp_cont">
		<h4 id="fontLato">Lato</h4>		
		<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
		<div class="temp_cont_box font lato">
			<h5>Word</h5>
			A B C D E F G H I J K L M N O P Q R S T U V W X Y Z<br/>
			a b c d e f g h i j k l m n o p q r s t u v w x y z
			<h5>Number</h5>
			1 2 3 4 5 6 7 8 9 0			
		</div>
	</div>
	<!-- //Font -->

	<!-- Input -->
	<h3>Input</h3>
		<!-- Type Text -->
		<div class="temp_cont">
			<h4 id="ttext">Type Text</h4>		
			<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
			<div class="temp_cont_box">
				<h5>height:30px; border:1px solid #c1c1c1;</h5>
				<input type="text" style="width:100px;"/><label>width 정의 style="" inline</label>
			</div>
		</div>
		<!-- //Text -->

		<!-- Type Radio,  Checkbox -->
		<div class="temp_cont">
			<h4 id="tradio">Type Radio</h4>		
			<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
			<div class="temp_cont_box">
				<ul class="temp_2column">
					<li><span class="icutm"><input type="radio" name="square-radio"/></span><label>Normal</label></li>
					<li><span class="icutm"><input type="radio" name="square-radio" checked="checked"/></span><label>Checked</label></li>
					<li><span class="icutm"><input type="radio" name="square-radio" disabled="disabled"/></span><label>Disabled</label></li>
					<li><span class="icutm"><div class="state iradio_square-blue checked disabled"></div><!-- <input type="radio" name="square-radio" checked="checked" disabled="disabled"/> --></span><label>Disabled & checked</label></li>
				</ul>
			</div>
		</div>

		<div class="temp_cont">
			<h4 id="tcheckbox">Type Checkbox</h4>		
			<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
			<div class="temp_cont_box">
				<ul class="temp_2column">
					<li><span class="icutm"><input type="checkbox"/></span><label>Normal</label></li>
					<li><span class="icutm"><input type="checkbox" checked="checked"/></span><label>Checked</label></li>
					<li><span class="icutm"><input type="checkbox" disabled="disabled"/></span><label>Disabled</label></li>
					<li><span class="icutm"><input type="checkbox" checked="checked" disabled="disabled"/></span><label>Disabled & checked</label></li>
				</ul>
			</div>
		</div>
		<!-- //Type Radio,  Checkbox -->

		<!-- Select Box -->
		<div class="temp_cont">
			<h4 id="tselectbox">Select box</h4>		
			<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
			<div class="temp_cont_box">
				<h5>class="select"</h5>
				<select class="select">
					<option>test1</option>
					<option>test2</option>
					<option>test3</option>
					<option>test4</option>
					<option>test5</option>
				</select>
			</div>
		</div>
		<!-- //Select Box -->

	<!-- //Input -->

	<!-- Datepicker -->
	<div class="temp_datepicker">
		<h4 id="tdatepicker"><span><a href="#temp_article" title="위로">&#94;</a></span>Date Picker</h2>
		<div class="temp_cont">
			<div class="temp_cont_box">
				<h5>class="datepicker"</h5>
				<input type="text" class="datepicker"/>
				<h5>class="from", class="to"</h5>
				<input type="text" class="from"/><span class="ipt-bar">하이픈</span><input type="text" class="to"/>				
			</div>
		</div>
	</div>
	<!-- //Datepicker -->

	<!-- Modal Window -->
	<div class="temp_datepicker">
		<h4 id="tmodal"><span><a href="#temp_article" title="위로">&#94;</a></span>Modal Window</h2>
		<div class="temp_cont">
			<div class="temp_cont_box">
				<a onclick="dialogOpen('pop_default');" class="btn_pop">팝업</a>
				<!-- Popup Default -->
				<div id="pop_default" class="popArea">	
					<div class="pop_normal">
						<button type="button" onclick="dialogClose('pop_default');" class="btn_pop">닫기</button>		
					</div>
				</div>
				<!-- //Popup Default -->
			</div>
		</div>
	</div>
	<!-- //Modal Window -->

	<!-- Button -->
	<h3>Button</h3>
		<!-- 고객정보 신청 -->
		<div class="temp_cont">
			<h4 id="tbtn">고객정보 신청</h4>		
			<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
			<div class="temp_cont_box">
				<h5>class="btn type-req"</h5>
				<a href="#" class="btn type-req"><span><em class="i-req1">고객정보 반출신청</em></span></a>
				<a href="#" class="btn type-req"><span><em class="i-req2">업무 신규등록</em></span></a>
				<a href="#" class="btn type-req"><span><em class="i-req3">수탁사 등록</em></span></a>
				<a href="#" class="btn type-req"><span><em class="i-req4">수탁사 사용자 신청</em></span></a>
				<a href="#" class="btn type-req"><span><em class="i-req5">DM 신청</em></span></a>
				<br/><br/>
				<a href="#" class="btn type-req"><span><em class="i-req6">DM 등록</em></span></a>
				<a href="#" class="btn type-req"><span><em class="i-req7">자재 등록</em></span></a>
				<a href="#" class="btn type-req"><span><em class="i-req8">동봉물 등록</em></span></a>
			</div>
		</div>
		<!-- //고객정보 신청 -->

		<!-- TYPE ICON FILE-->
		<div class="temp_cont">
			<h4 id="tbtn">TYPE ICON FILE</h4>		
			<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
			<div class="temp_cont_box">
				<ul class="temp_2column">
					<li>
						<h5>class="btn i-file"</h5>
						<a href="#" class="btn i-file"><span>파일</span></a>
					</li>
					<li>
						<h5>class="btn i-file add"</h5>
						<a href="#" class="btn i-file add"><span>파일</span></a>
					</li>
					<li>
						<h5>class="btn i-send"</h5>
						<a href="#" class="btn i-send"><span>발송</span></a>
					</li>
					<li>
						<h5>class="btn i-sample"</h5>
						<a href="#" class="btn i-sample"><span>DM샘플</span></a>
					</li>
				</ul>				
			</div>
		</div>
		<!-- //TYPE ICON FILE -->

		<!-- TYPE -->
		<div class="temp_cont">
			<h4>TYPE</h4>		
			<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
			<div class="temp_cont_box">
				<ul class="temp_2column">
					<li>
						<h5>class="btn type1"</h5>
						<a href="#" class="btn type1"><span>버튼</span></a>
					</li>
					<li>
						<h5>class="btn type2"</h5>
						<a href="#" class="btn type2"><span>버튼</span></a>
					</li>
					<li>
						<h5>class="btn type3"</h5>
						<a href="#" class="btn type3"><span>버튼</span></a>
					</li>
					<li>
						<h5>class="btn type3 focus"</h5>
						<a href="#" class="btn type3 focus"><span>버튼</span></a>
					</li>
				</ul>
				<ul class="temp_2column">
					<li>
						<h5>class="btn type4"</h5>
						<a href="#" class="btn type4"><span>버튼</span></a>
					</li>
					<li>
						<h5>class="btn type5"</h5>
						<a href="#" class="btn type5"><span>버튼</span></a>
					</li>
					<li>
						<h5>class="btn type6"</h5>
						<a href="#" class="btn type6"><span>버튼</span></a>
					</li>
					<li>
						<h5>class="btn type6 focus"</h5>
						<a href="#" class="btn type6 focus"><span>버튼</span></a>
					</li>
				</ul>
				<ul class="temp_2column">
					<li>
						<h5>class="btn type7"</h5>
						<a href="#" class="btn type7"><span>버튼</span></a>
					</li>
					<li>
						<h5>class="btn type8"</h5>
						<a href="#" class="btn type8"><span>버튼</span></a>
					</li>
				</ul>
			</div>
		</div>
		<!-- //TYPE -->

		<!-- TYPE ICON -->
		<div class="temp_cont">
			<h4>TYPE ICON</h4>		
			<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
			<div class="temp_cont_box">				
				
				<ul class="temp_column">
					<li>
						<h5>class="i-ok", class="i-ok2"</h5>
						<p>확인, 검수 확인, 수정완료, 작성완료, 등록, 선택, 업무 등록</p>
						<a href="#" class="btn type1"><span><em class="i-ok"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-ok2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-reg-app", class="i-reg-app2"</h5>
						<p>등록 신청, 신청</p>
						<a href="#" class="btn type1"><span><em class="i-reg-app"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-reg-app2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-acpt", class="i-acpt2"</h5>
						<p>접수, 등록신청 접수</p>
						<a href="#" class="btn type1"><span><em class="i-acpt"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-acpt2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-app", class="i-app2"</h5>
						<p>승인, 계정 승인, 승인요청</p>
						<a href="#" class="btn type1"><span><em class="i-app"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-app2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-retn", class="i-retn2"</h5>
						<p>반려, 검수 반려, 승인 반려, 접수 반려, 계정반려</p>
						<a href="#" class="btn type1"><span><em class="i-retn"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-retn2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-edit", class="i-edit2"</h5>
						<p>수정하기, 정보 수정, 업무 수정</p>
						<a href="#" class="btn type1"><span><em class="i-edit"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-edit2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-exc", class="i-exc2"</h5>
						<p>사용자 경고</p>
						<a href="#" class="btn type1"><span><em class="i-exc"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-exc2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-prev", class="i-prev2"</h5>
						<p>이전</p>
						<a href="#" class="btn type1"><span><em class="i-prev"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-prev2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-next", class="i-next2"</h5>
						<p>다음단계</p>
						<a href="#" class="btn type1"><span><em class="i-next"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-next2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-report", class="i-report2"</h5>
						<p>파기보고서 작성</p>
						<a href="#" class="btn type1"><span><em class="i-report"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-report2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-emg", class="i-emg2"</h5>
						<p>긴급 파기요청</p>
						<a href="#" class="btn type1"><span><em class="i-emg"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-emg2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-pdf", class="i-pdf2"</h5>
						<p>샘플 PDF생성</p>
						<a href="#" class="btn type1"><span><em class="i-pdf"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-pdf2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-recall", class="i-recall2"</h5>
						<p>IT전산 재요청, 재신청</p>
						<a href="#" class="btn type1"><span><em class="i-recall"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-recall2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-list", class="i-list2"</h5>
						<p>목록</p>
						<a href="#" class="btn type1"><span><em class="i-list"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-list2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-save", class="i-save2"</h5>
						<p>저장하기, 선택 설정 저장</p>
						<a href="#" class="btn type1"><span><em class="i-save"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-save2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-cancl", class="i-cancl2"</h5>
						<p>취소</p>
						<a href="#" class="btn type1"><span><em class="i-cancl"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-cancl2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-zoom", class="i-zoom2"</h5>
						<p>찾기, 공유자 찾기</p>
						<a href="#" class="btn type1"><span><em class="i-zoom"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-zoom2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-info-app", class="i-info-app2"</h5>
						<p>고객정보 신청</p>
						<a href="#" class="btn type1"><span><em class="i-info-app"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-info-app2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-xl", class="i-xl2"</h5>
						<p>엑셀 다운로드</p>
						<a href="#" class="btn type1"><span><em class="i-xl"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-xl2"></em>버튼</span></a>
					</li>
					<li>
						<h5>class="i-cal", class="i-cal2"</h5>
						<p>달력</p>
						<a href="#" class="btn type1"><span><em class="i-cal"></em>버튼</span></a>
						<a href="#" class="btn type1"><span><em class="i-cal2"></em>버튼</span></a>
					</li>
				</ul>				
			</div>
		</div>
		<!-- //TYPE ICON -->

		<!-- TYPE 팝업 -->
		<div class="temp_cont">
			<h4>TYPE 팝업</h4>		
			<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
			<div class="temp_cont_box">
				<h5>class="btn popup"</h5>
				<a href="#" class="btn popup"><span>버튼</span></a>
			</div>
		</div>
		<!-- //TYPE 팝업 -->

		<!-- TYPE 팝업 -->
		<div class="temp_cont">
			<h4>TYPE 업로드</h4>		
			<a href="#temp_article" title="위로" class="temp_top">&#94;</a>
			<div class="temp_cont_box">				
				<div class="file-upload">
					<div class="file-dis"></div>
					<input type="file" size="24" class="browser-hidden" onchange="getElementById('file-field1').value = this.value;"/>
					<div class="browser-visible"><input type="text" id="file-field1" class="file-field"/></div>
					<span class="file-txt"><a href="#" class="txt-unline">첨부파일명.확장자</a> <a href="#" class="btn-del">삭제<a/> <!--<span class="file-vol"><strong>0</strong> / 10MB</span>--></span>
				</div>
			</div>
		</div>
		<!-- //TYPE 팝업 -->

	<!-- //Button -->

	
</div>
<!-- //Wrap -->
</body>


<!-- Mirrored from 112.216.117.106:16682/html/template.html by HTTrack Website Copier/3.x [XR&CO'2014], Fri, 03 Apr 2015 06:58:19 GMT -->
</html>
